<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全局-局部-外部变量理解(Understanding Global Local External Variables)</title>
  <!-- 
  在JavaScript中，理解全局变量、局部变量和外部变量的概念对于编写清晰和高效的代码至关重要。

  一、全局变量（Global Variables）
  全局变量是在整个代码中都可以访问的变量。它们通常在函数外部声明，并且可以在任何函数内访问和修改。

   特点：
  - 声明在函数外部，作用域为全局。
  - 可以在任何地方访问。
  - 可能导致命名冲突，影响代码的可维护性。

    let globalVar = "I am a global variable"; // 全局变量
    function showGlobalVar() {
      console.log(globalVar); // 可以访问全局变量
    }

    showGlobalVar(); // 输出 "I am a global variable"
    console.log(globalVar); // 输出 "I am a global variable"

  二、局部变量（Local Variables）

  局部变量是在函数内部声明的变量，其作用域仅限于该函数内部。局部变量在函数外部不可访问。
   特点：
  - 声明在函数内部，作用域为局部。
  - 只能在该函数内访问，外部无法访问。
  - 有助于避免命名冲突，提升代码的可维护性。

   示例：
    function myFunction() {
      let localVar = "I am a local variable"; // 局部变量
      console.log(localVar); // 可以访问局部变量
    }

    myFunction(); // 输出 "I am a local variable"
    console.log(localVar); // 报错，localVar在外部不可访问

  三、外部变量（External Variables）
  外部变量通常指的是在一个函数外部定义的变量，并且可以在多个函数之间共享。它们实际上是全局变量，但在某些情况下，可能会通过模块或闭包的方式进行访问。

   特点：
  - 可以在多个函数中访问。
  - 有助于在不同的作用域之间共享数据。
  - 可能导致命名冲突，尤其是在大型项目中。

   示例：
    let externalVar = "I am an external variable"; // 外部变量
    function firstFunction() {
      console.log(externalVar); // 可以访问外部变量
    }

    function secondFunction() {
      console.log(externalVar); // 也可以访问外部变量
    }

    firstFunction(); // 输出 "I am an external variable"
    secondFunction(); // 输出 "I am an external variable"

  四、总结

  1. 全局变量：在整个代码中可访问，可能导致命名冲突。
  2. 局部变量：仅在函数内部可访问，避免了全局命名冲突。
  3. 外部变量：通常是全局变量，可以在多个函数之间共享，但也可能导致冲突。

  -->
</head>
<body>

  <script>

    // 全局变量
    let globalVar = "I am a global variable";

    function myFunction() {
      // 局部变量
      let localVar = "I am a local variable";
      
      console.log(innerVar); // 报错，innerVar在函数内部不可访问
      function innerFunction() {
        var innerVar = "I am an inner variable";
        console.log(globalVar); // 可以访问全局变量
        console.log(localVar); // 可以访问局部变量
      }

      innerFunction();
    }

    myFunction(); // 输出 "I am a global variable"

    // console.log(localVar); // 报错，localVar在外部不可访问

    
  </script>
  
</body>
</html>